<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>todolist App</title>
    <style>
      * {
         box-sizing: border-box;
         margin: 0;
         padding: 0;
      }
      h1{
        margin: 24px 0;
        font-size: 20rpx;
        color: #414873;
      }
      .container{
        width: 100%;
        min-height: 750px;
        padding: 250px 0 550px;
        display: grid;
        align-items: flex-start;
        justify-self: center;
        background: #d8dfff;
      }
      .todo {
        width: 60%;
        max-width: 400px;
        box-shadow: 0 0 24px rgba(0,0,0, 0.15);
        border-radius: 24px;
        padding: 40px 20px;
        background: #f5f6fc;
        margin: 0 auto;
       }
      label{
        position: relative;
        display: flex;
        align-items: center;
        cursor: pointer;
      }
      .todo-input{
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
      }
      .todo-input input{
        padding:16px 52px 16px 18px;
        border-radius: 48px;
        border: none;
        outline: none;
        box-shadow: 0 0 24px rgba(0,0,0, 0.08);
        width: 100%;
        font-size: 18px;
        color: #626262;
      }
      .todo-input .add-btn{
        width: 80px;
        height: 50px;
        border: 20px;
        border-radius: 25px;
        background: linear-gradient(#c0a5f3, #7f95f7);
        border: none;
        color: #fff;
        position: absolute;
        right: 0;
        cursor: pointer;
        outline: none;
      }
      .todo-list{
        display: grid;
        row-gap: 14px;
      }
      .todo-item{
        background: #fff;
        padding: 16px;
        border-radius: 8px;
        color: #626262;
      }
      .todo-item button{
          width: 50px;
          height: 22px;
          float: right;
          border-radius: 50%;
          background: linear-gradient(#c8a5f3, #7f95f7);
          border: none;
          color: #fff;
          cursor: pointer;
          outline: none;
          width: 40px;
          border-radius: 3px;        
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="todo">
        <h1>欢迎使用todolist</h1>
        <div class="todo-input">
          <input type="text">
          <button class="add-btn">添加</button>
        </div>
        <div class="todo-list"></div>
      </div>
    </div>
    <script type="module" src="./src/app.ts"></script>
  </body>
</html>
